<template>
  <div class="user-core-data">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="注册用户" name="fourth">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          v-if="this.activeName == 'fourth'"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.productLineSl"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="活跃用户" name="second">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          v-if="this.activeName == 'second'"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.productLineSl"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="登录用户" name="third">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          v-if="this.activeName == 'third'"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.productLineSl"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="累计数据" name="first">
        <span style="color: #409eff">
          累计注册数仅统计通过对应产品注册的账号，幕童系产品的账号可以通用，
        </span>
        <span style="color: #409eff; font-weight: 700">
          故单一产品的累计登录用户数可能大于通过该产品注册的累计注册数
        </span>
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          v-if="this.activeName == 'first'"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
          :showSelect="true"
          :options="this.$ENUMS.productLineSl"
          :showSelect2="true"
          :options2="this.$ENUMS.terminalSl"
        ></statistics-data>
      </el-tab-pane>
      <el-tab-pane label="用户地区分布" name="fifth">
        <user-data-map></user-data-map>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import StatisticsData from "@/components/StatisticsData";
import UserDataMap from "@/views/DataStatistics/UserDataMap";
import { fieldCover } from "@/utils/field";
export default {
  components: {
    StatisticsData,
    UserDataMap,
  },
  data() {
    return {
      activeName: "fourth",
      coreData: {},
      coreData1: {},
      xAxis: [],
      yAxis: [],
      series: [],
      legend: [],
      flag: false,
      tableLoadData: [],
      tableHeadConfig: [],
      modelVal: "",
      startTime: "",
      endTime: "",
    };
  },
  watch: {
    modelVal(newval) {
      this.startTime = newval.dataVal[0];
      this.endTime = newval.dataVal[1];
      var workType = newval.workType;
      var workType2 = newval.workType2;
      this.handleClick(
        this.startTime,
        this.endTime,
        workType.toString(),
        workType2.toString()
      );
    },
  },
  methods: {
    async handleClick(startTime, endTime, workType, workType2) {
      this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
      this.flag = false;
      this.tableLoadData = [];
      this.tableHeadConfig = [];
      this.legend = [];
      this.xAxis = [];
      this.yAxis = [];
      this.series = [];

      if (this.activeName == "first") {
        await this.$service.StatisUserCore({ pt: "kt" }).then((res) => {
          this.coreData.kt = res;
        });
        await this.$service.StatisUserCore({ pt: "jm" }).then((res) => {
          this.coreData.jm = res;
        });
        await this.$service
          .StatisUserCoreChart({
            startDate: startTime,
            endDate: endTime,
            pt: workType,
            os: workType2,
          })
          .then((res) => {
            this.tableLoadData = res.dayData;
            this.tableHeadConfig = this.$ENUMS.coreUser;
            this.legend = this.$ENUMS.userLegend;
            this.yAxis = [{ type: "value" }];
            var Cnts = [[], [], []];
            res.dayData.map((item) => {
              this.xAxis.push(item.day);
              Cnts[0].push(item.userCnt);
              Cnts[1].push(item.logCnt);
              Cnts[2].push(item.regCnt);
            });
            Cnts.map((cnt, index) => {
              var serie = {
                name: this.legend[index],
                type: "line",
                data: cnt,
              };
              this.series.push(serie);
            });
            this.flag = true;
          })
          .catch((err) => {});
      }
      if (this.activeName == "second") {
        await this.$service.StatisUserActive({ pt: "kt" }).then((res) => {
          this.coreData.kt = res;
        });
        await this.$service.StatisUserActive({ pt: "jm" }).then((res) => {
          this.coreData.jm = res;
        });
        this.$service
          .StatisUserActiveChart({
            startDate: startTime,
            endDate: endTime,
            pt: workType,
            os: workType2,
          })
          .then((res) => {
            fieldCover(res.otherData, res.dayData);
            this.tableLoadData = [...res.dayData, ...res.otherData];
            this.tableHeadConfig = this.$ENUMS.activeUser;
            this.legend = this.$ENUMS.activeLegend;
            this.yAxis = [{ type: "value" }];
            var Cnts = [[], [], [], []];
            res.dayData.map((item) => {
              this.xAxis.push(item.day);
              Cnts[0].push(item.dauCnt);
              Cnts[1].push(item.ndauCnt);
              Cnts[2].push(item.wauCnt);
              Cnts[3].push(item.mauCnt);
            });
            Cnts.map((cnt, index) => {
              var serie = {
                name: this.legend[index],
                type: "line",
                data: cnt,
              };
              this.series.push(serie);
            });
            this.flag = true;
          })
          .catch((err) => {});
      }
      if (this.activeName == "third") {
        await this.$service.StatisUserLogin({ pt: "kt" }).then((res) => {
          this.coreData.kt = res;
        });
        await this.$service.StatisUserLogin({ pt: "jm" }).then((res) => {
          this.coreData.jm = res;
        });
        this.$service
          .StatisUserLoginChart({
            startDate: startTime,
            endDate: endTime,
            pt: workType,
            os: workType2,
          })
          .then((res) => {
            this.tableLoadData = [...res.dayData, ...res.otherData];
            this.tableHeadConfig = this.$ENUMS.loginUser;
            this.legend = this.$ENUMS.loginLegend;
            var Cnts = [[], [], []];
            res.dayData.map((item) => {
              this.xAxis.push(item.day);
              Cnts[0].push(item.userCnt);
              Cnts[1].push(item.ratio);
              Cnts[2].push(item.newCnt);
            });
            Cnts.map((cnt, index) => {
              var serie = {
                name: this.legend[index],
                type: "line",
                data: cnt,
                yAxisIndex: index == 1 ? Cnts.length - 1 : null,
              };
              var y = {
                type: "value",
                min: 0,
                position: Cnts.length == index + 1 ? "right" : "left",
              };
              this.yAxis.push(y);
              this.series.push(serie);
            });
            fieldCover(res.otherData, res.dayData);
            this.flag = true;
          })
          .catch((err) => {});
      }
      if (this.activeName == "fourth") {
        await this.$service.StatisUserReg({ pt: "kt" }).then((res) => {
          this.coreData.kt = {};
          this.coreData.kt.newRegCnt = res.newCnt;
          this.coreData.kt.weekRegCnt = res.weekCnt;
          this.coreData.kt.monthRegCnt = res.monthCnt;
          this.coreData.kt.totalCnt = res.totalCnt;
        });
        await this.$service.StatisUserReg({ pt: "jm" }).then((res) => {
          this.coreData.jm = {};
          this.coreData.jm.newRegCnt = res.newCnt;
          this.coreData.jm.weekRegCnt = res.weekCnt;
          this.coreData.jm.monthRegCnt = res.monthCnt;
          this.coreData.jm.totalCnt = res.totalCnt;
        });
        this.$service
          .StatisUserRegChart({
            startDate: startTime,
            endDate: endTime,
            pt: workType,
            os: workType2,
          })
          .then((res) => {
            fieldCover(res.otherData, res.dayData);
            this.tableLoadData = [...res.dayData, ...res.otherData];
            this.tableHeadConfig = this.$ENUMS.regUser;
            this.legend = this.$ENUMS.regLegend;
            this.yAxis = [{ type: "value" }];
            var Cnts = [[], [], []];
            res.dayData.map((item) => {
              this.xAxis.push(item.day);
              Cnts[0].push(item.newCnt);
              Cnts[1].push(item.weekCnt);
              Cnts[2].push(item.monthCnt);
            });
            Cnts.map((cnt, index) => {
              var serie = {
                name: this.legend[index],
                type: "line",
                data: cnt,
              };
              this.series.push(serie);
            });
            this.flag = true;
          })
          .catch((err) => {});
      }
    },
  },
};
</script>
<style lang="less" scoped>
.user-core-data {
  text-align: left;
}
</style>
